<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form inline :model="form" ref="form" class="demo-form-inline">
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="daterange"
            type="daterange"
            align="right"
            @change="handleRangeChange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="isLoading" type="primary" @click="onSubmit">查询</el-button>
          <el-button :disabled="isLoading" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <slot />
    <el-table :data="users" style="width: 100%" v-loading="isLoading">
      <el-table-column prop="id" label="用户ID"> </el-table-column>
      <el-table-column prop="portrait" label="头像">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.portrait">
            <img
              src="//www.lgstatic.com/thumbnail_100x100/i/image2/M01/5E/65/CgotOVszSAOANi0LAAAse2IVWAE693.jpg"
            />
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="createTime" label="注册时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | format }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <i
            v-if="scope.row.status === 'ENABLE'"
            class="status status-success"
            title="正常"
          ></i>
          <i v-else class="status status-danger" title="禁用"></i>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 'ENABLE'"
            type="text"
            size="small"
            @click="handleForbidUser(scope.row)"
          >
            禁用
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleSelectUser(scope.row)"
          >
            分配角色
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :disabled="isLoading"
      :current-page.sync="form.current"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="form.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="分配角色" :visible.sync="dialogVisible" width="30%">
      <el-select v-model="roleIdList" multiple placeholder="请选择">
        <el-option
          v-for="item in roles"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div slot="footer">
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="handleAllocRoles"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getAllRoles, getUserRoles, allocateUserRoles } from '@/services/role'
import { getUserPages, forbidUser } from '@/services/user'
export default Vue.extend({
  data () {
    return {
      users: [],
      total: 0,
      isLoading: false,
      form: {
        currentPage: 1,
        pageSize: 10,
        phone: '',
        startCreateTime: '',
        endCreateTime: ''
      },

      daterange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker: Vue) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker: Vue) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker: Vue) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },

      currentUser: null,
      dialogVisible: false,
      roles: [],
      roleIdList: []
    }
  },

  created () {
    this.loadUsers()
    this.loadAllRoles()
  },

  methods: {
    async loadAllRoles () {
      const { data } = await getAllRoles()
      this.roles = data.data
      console.log(data)
    },
    async handleForbidUser (user: any) {
      const { data } = await forbidUser({ userId: user.id })
      this.loadUsers()
    },
    async loadUsers () {
      this.isLoading = true
      const { data } = await getUserPages(this.form)
      this.users = data.data.records
      this.total = data.data.total
      this.isLoading = false
    },
    handleRangeChange ([start, end]: string[]) {
      this.form.startCreateTime = start
      this.form.endCreateTime = end
    },
    handleSizeChange (val: number) {
      this.form.currentPage = 1
      this.form.pageSize = val
      this.loadUsers()
    },
    onSubmit () {
      console.log('onSubmit')
      this.loadUsers()
    },
    onReset () {
      this.form.phone = ''
      this.form.startCreateTime = ''
      this.form.endCreateTime = ''
      this.daterange = []
      this.loadUsers()
    },
    handleCurrentChange (val: number): void {
      this.form.currentPage = val
      this.loadUsers()
    },
    async handleSelectUser (user: any) {
      this.currentUser = user
      this.dialogVisible = true
      const { data: userRoles } = await getUserRoles(user.id)
      this.roleIdList = userRoles.data.map((item: any) => item.id)
    },
    async handleAllocRoles () {
      this.dialogVisible = false
      const { data } = await allocateUserRoles({
        userId: (this.currentUser as any).id,
        roleIdList: this.roleIdList
      })
      this.$message.success('操作成功！')
    }
  }
})
</script>

<style lang="scss" scoped>
.status {
  display: inline-block;
  cursor: pointer;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: middle;
  border-radius: 50%;
}

.status-success {
  background-color: $success-color;
}

.status-danger {
  background-color: $danger-color;
}
</style>
